import axios from "axios";
// import { start } from "nprogress";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
// import { InfiniteScroll, List } from 'antd-mobile'

function List() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
const navigate = useNavigate()
  useEffect(() => {
    axios.get("/api/list", { params: { page } }).then((res) => {
      console.log(res);
      setData(res.data.data);
    });
  }, []);

  const goxx = (v)=>{
    navigate('/xq')
    localStorage.setItem('data',JSON.stringify(v))
  }

// const [hasMore, setHasMore] = useState(true)
  // async function loadMore() {
    // const append = await mockRequest()
    // setData(data => [...data, data])
    // setHasMore(append.length > 0)
  // }


  return (
    <div>
      {data.map((v, i) => {
        return (
          <dl key={i} onClick={()=>{
            goxx(v)
          }}>
            <dt>
              <img
                src={v.image}
                style={{ width: "60px", height: "60px" }}
                alt=""
              />
            </dt>
            <dd>{v.title}</dd>
          </dl>
        );
      })}
      {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
    </div>
  );
}

export default List;
